<template>
  <el-dialog :destroy-on-close="true" :lock-scroll="false" :title="form_title" :visible.sync="visible"
             width="900px">
    <!--    form start   -->
    <el-form ref="form" :model="form" :rules="rules" label-width="82px">
      <el-form-item label="工单编号" >
        <el-input v-model="form.name" placeholder="请输入工单编号名称" disabled/>
      </el-form-item>

      <el-form-item label="设备编号" prop="description">
        <el-input v-model="form.description" placeholder="请输入设备编号"/>
      </el-form-item>
      <el-form-item label="故障原因">
        <el-input v-model="form.reason" placeholder="请输入故障原因" type="textarea" :rows="3"/>
      </el-form-item>
      <el-form-item label="处理方式" prop="process_type">
        <el-input v-model="form.process_type" placeholder="请输入处理方式" type="textarea" :rows="3"/>
      </el-form-item>


      <receiptTable :table.sync="form.boms" type="boms" ref="bomsTable"></receiptTable>

      <servicesTable :table.sync="form.services" type="services" ref="servicesTable"></servicesTable>


      <el-form-item label="服务前图片" >
        <uploadImage v-model="form.images" :limit="4"></uploadImage>
        <div class="el-upload__tip">请上传jpg、png图片附件，最多可上传4张，单张大小不要超过8M。</div>
      </el-form-item>

      <el-form-item label="服务后图片" >
        <uploadImage v-model="form.images" :limit="4"></uploadImage>
        <div class="el-upload__tip">请上传jpg、png图片附件，最多可上传4张，单张大小不要超过8M。</div>
      </el-form-item>

      <el-form-item label="备注" >
        <el-input v-model="form.description" placeholder="请输入备注" type="textarea" :rows="4"  maxlength="300"
        show-word-limit />
      </el-form-item>


    </el-form>
    <!--    form end       -->
    <div slot="footer">
      <el-button @click="handleCancel">取消</el-button>
      <el-button :loading="loading" type="primary" @click="handleSave('form')">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import '@riophae/vue-treeselect/dist/vue-treeselect.css';
import uploadImage from '@/components/uploadImage.vue'
import receiptTable from "@/views/workTickets/workTickets/compoments/bomsTable.vue";
import servicesTable from "@/views/workTickets/workTickets/compoments/servicesTable.vue";

export default {
  name: "",
  components: {uploadImage,receiptTable,servicesTable},
  data() {
    const validatedescription = (rule, value, callback) => {
      // 判断 country_id province_id city_id county_id 是否为空
      if (!this.form.description) {
        callback(new Error("请输入设备编号"));
      } else {
        callback();
      }
    };

    return {
      //工单id
      id: null,
      //编辑的行bom
      editNum: null,
      //编辑的行services
      editNum1:null,
      //省市区回显
      cityName: '',
      // 选择的省市区
      city: [],
      deptList: null,
      type: null,
      visible: false,
      rules: {
        description: [
          {required: true, validator: validatedescription, trigger: "blur"}
        ],
        process_type: [
          {required: true, message: "请输入处理方式", trigger: "blur"}
      ]
      },
      form: {
        boms: [
        ],
        services: [
        ]
      },
      form_title: "",
      loading: false,
      deptLists: [],
      fileList: [],
      //选择文件保质期方式
      radio: "at",
      productType: {},
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  mounted() {
  },
  computed: {},

  methods: {
    /**
     * @param type 弹窗类型
     * @param form 表单数据（建议后期优化为从后端获取数据）
     */
    //编辑或者保存bom
    edit(val){
      //编辑
      if(this.editNum!==val){
        this.editNum = val
      }else {
        this.editNum=null
      }
    },

    handleCancel() {
      this.form = {
        boms: [
          {
            bom_number: "",
            name:"",
            type:'',
            unit:'',
            number: 1,
          },
        ],
      }
      this.visible = false;
      // this.$refs['form'].resetFields();
    }
    ,

    showDialog(id) {
      this.id = id
      this.visible = true;
    }
    ,
    /** 保存**/
    handleSave(val) {
      let flag1 = false, flag2 = false
       flag1 = this.$refs.bomsTable.validate()
       flag2 = this.$refs.servicesTable.validate()
      console.log(flag1)
      console.log(flag2)
      this.$refs[val].validate((valid) => {
        if (!valid||!flag1||!flag2) {
          return false;
        }else{
          console.log(this.form)
        }
        // this.$http.post(`/wos/${this.id}/receipt`,this.form).then(() => {
        //   this.visible = false;
        // }).catch(e => {
        //   this.$message.error(e.message);
        // });
      });
    }

  }
  ,
  /** 取消事件 **/


}
</script>

<style scoped>
.area /deep/ input {
  width: 628px;
}

/deep/ .el-input {
  width: 100%;
}

/deep/ .el-autocomplete {
  width: 100%;
}

.bomList>>>.el-input__inner {
  border: 0;
  outline: none;
  background-color: rgba(0, 0, 0, 0);
}


</style>
